<template>
	<ul class="data-list-container">
		<li v-for="item in list" :key="item.id">
			<avatar :size="50" :url="item.avatar"></avatar>
			<div class="data">
				<div class="nickname">
					{{ item.nickname }}
					<span class="datetime">{{ timestampToLocal(item.createDate, true) }}</span>
				</div>
				<div class="content">
					{{ item.content }}
				</div>
			</div>
		</li>
	</ul>
</template>

<script>
import Avatar from '@/components/Avatar'
import { timestampToLocal } from '@/utils/time'
export default {
	name: 'DataList',
	components: { Avatar },
	props: {
		list: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {}
	},
	methods: {
		timestampToLocal,
	},
}
</script>

<style lang="less" scoped>
@import '~@/styles/basic/var.less';
.data-list-container {
	width: 100%;
	li {
		width: 100%;
		display: flex;
		gap: 15px;
		margin-bottom: 15px;
		border-bottom: 1px solid #eee;
		.avatar-container {
			flex: 0 0 auto;
		}
		.data {
			width: 100%;
			.nickname {
				color: @success;
				position: relative;
				.datetime {
					position: absolute;
					right: 0;
					top: 2px;
					color: @gray;
					font-size: 12px;
				}
			}
			.content {
				padding: 10px 0;
			}
		}
	}
}
</style>
